<template lang="pug">
  v-dialog(v-model="show" max-width="500px" persistent)
    v-card
      v-card-title {{ title }}
      v-card-text
        slot
          v-text-field(ref="inputField" label="名称" v-model="value"  @keyup.enter="confirm")
      v-card-actions
        v-spacer
        v-btn(text @click="cancel") 取消
        v-btn(text color="primary" @click="confirm") 确定
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: [],
  methods: {
    ...mapActions('asset', ['store']),
    toggle(title, command = {}) {
      this.title = title
      this.value = ''
      this.command = command
      this.show = true
      this.$nextTick(() => {
        this.$refs.inputField.focus()
      })
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },
    cancel() {
      this.show = false
      this.reject()
    },
    close() {
      this.show = false
      this.title = ''
      this.$loading.close()
    },
    confirm() {
      if (this.value === '') {
        return
      }
      let event = Object.assign(
        {
          formData: { name: this.value }
        },
        this.command
      )
      this.$loading('保存中...')
      this.store(event)
        .then(response => this.resolve({ event, response }))
        .catch(err => {
          this.$msgBox(err)
        })
        .finally(() => {
          this.close()
        })
    }
  },
  computed: {},
  data() {
    return {
      title: '',
      resolve: () => {},
      reject: () => {},
      command: {},
      value: '',
      show: false
    }
  }
}
</script>